<!DOCTYPE html>
<html>
<head>
	<title>无缝滚动</title>
<style type="text/css">
    *{margin:0px;padding: 0px}
	#div1{width:1024px;height: 256px;margin:100px auto; position: relative;overflow: hidden; border: 3px solid #333;}
	#div1 ul{position: absolute;left: 0px;top: 0px;}
	#div1 ul li{float: left;list-style: none;height:256px;width:256px}
</style>
<script type="text/javascript">
	window.onload=function(){
		var speed=4;
		var timer=null;
		var oDiv=document.getElementById('div1');
		var oUl=oDiv.getElementsByTagName('ul')[0];
		var aLi=oUl.getElementsByTagName('li');
		oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
		oUl.style.width= aLi[0].offsetWidth*aLi.length+"px";
		
		function move(){
			if(oUl.offsetLeft<-oUl.offsetWidth/2)
			{
				oUl.style.left='0';
		    }
		   if(oUl.offsetLeft>0)
		   {
		   	  oUl.style.left=-oUl.offsetWidth/2+"px";
		   }
		    
				oUl.style.left=oUl.offsetLeft+speed+"px";
		   
		}
		timer=setInterval(move,30);
		oDiv.onmouseover=function()
		{
			clearInterval(timer);
		}
		oDiv.onmouseout=function()
		{
			timer=setInterval(move,30);
		}
		document.getElementsByTagName('a')[0].onclick=function()
		{
			speed=4;
		}
		document.getElementsByTagName('a')[1].onclick=function()
		{
			speed=-4;
		}

	}
</script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
	<ul>
		<li><img src="./img/21.png"></li>
		<li><img src="./img/22.png"></li>
		<li><img src="./img/23.png"></li>
		<li><img src="./img/24.png"></li>
	</ul>
</div> 
</body>
</html>